<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>vue基础知识</title>

</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>

        <table border="1" width="100%">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>小计</th>
            </tr>
            <tr v-for="item,index in items">
                <td v-html="item.id"></td>
                <td v-html="item.name"></td>
                <td v-html="item.price"></td>
                <td>
                    <input type="button" value="+" @click="increaseCount(index)">
<!--                    {{item.count}}-->
                    <input type="text" v-model="item.count">
                    <input type="button" value="-" @click="decreaseCount(index)">
                </td>
                <td>{{item.count*item.price}}元</td>
            </tr>
        </table>
        <h1>{{totalPrice}}</h1>

        序号:<input type="text" v-model="item.id"></br>
        名称:<input type="text" v-model="item.name"></br>
        价格:<input type="text" v-model="item.price"></br>
        数量:<input type="text" v-model="item.count"></br>
        <button @click="addGood">新增商品</button>
        <input type="button" @click="addGood" value="新增商品"/>
    </div>
</body>
</html>

<script src="js/vue.js"></script>

<script>
    new Vue({
        el:"#app",
        data:{
            msg:"小明",
            item:{},
            items: [
                {id:1,name:"苹果",price:"5000",count:1},
                {id:2,name:"华为",price:"4000",count:10}
            ]
        },
        methods:{
            increaseCount(index){
                this.items[index].count++;
            },
            decreaseCount(index){
                this.items[index].count--;
            },
            addGood(){
                if (!this.item.id) {
                    alert('请输入id');
                    return false;
                }
                if (!this.item.name) {
                    alert('请输入名称');
                    return false;
                }
                if (!this.item.price) {
                    alert('请输入价格');
                    return false;
                }
                if (!this.item.count) {
                    alert('请输入数量');
                    return false;
                }
                this.items.push(this.item);
            }












            ,totalPriceMethod(){
                let total = 0;
                for (let i = 0; i < this.items.length; i++) {
                    total+= this.items[i].price*this.items[i].count
                }
                return total;
            }
        },
        computed:{
            totalPrice(){
                return this.totalPriceMethod();
            }
        }
    })
</script>
